<template>
  <el-form label-width="100px">
    <CommonProps />
    <el-form-item label="表格列名">
      <el-input type="textarea" v-model="state.cols" :autosize="{ maxRows: 10, minRows: 3 }" @change="onColChange" />
    </el-form-item>
    <el-form-item label="锁定列(前)">
      <el-input-number v-model="fs.getProps().fixedFirst" />
    </el-form-item>
    <el-form-item label="锁定列(后)">
      <el-input-number v-model="fs.getProps().fixedLast" />
    </el-form-item>
    <el-form-item label="最大高度(px)">
      <el-input-number v-model="fs.getProps().maxHeight" controls-position="right" />
    </el-form-item>
    <el-form-item label="允许多选">
      <el-switch v-model="fs.getProps().multiple" />
    </el-form-item>
    <el-form-item label="允许添加">
      <el-switch v-model="fs.getProps().add" />
    </el-form-item>
    <el-form-item label="允许修改">
      <el-switch v-model="fs.getProps().edit" />
    </el-form-item>
    <el-form-item label="允许删除">
      <el-switch v-model="fs.getProps().remove" />
    </el-form-item>
    <el-form-item label="显示边框">
      <el-switch v-model="fs.getProps().border" />
    </el-form-item>
    <el-form-item label="显示合计">
      <el-switch v-model="fs.getProps().summary" />
    </el-form-item>
    <el-form-item label="合计标题" v-show="fs.getProps().summary">
      <el-input v-model="fs.getProps().sumText" />
    </el-form-item>
    <el-form-item label="显示标题">
      <el-switch v-model="fs.getProps().showLabel" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import CommonProps from '../../common-props/Props.vue'
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElSwitch } from 'element-plus'
import { useFlowStore } from '@/stores/flow'

const fs = useFlowStore()
const state = reactive({ cols: '' })

onMounted(() => {
  state.cols = fs
    .getProps()
    .columns.map((c: any) => c.text)
    .join('\n')
})

const onColChange = () => {
  const columns = []
  if (state.cols) {
    const colArray = state.cols.split('\n')
    for (let i = 0; i < colArray.length; i++) {
      const col = colArray[i].trim()
      if (col) {
        columns.push({ name: `_col${i}_`, text: col })
      }
    }
  }
  fs.getProps().columns = columns
}
</script>

<style lang="scss" scoped></style>
